<!DOCTYPE html>
<!--
  Copyright 2012 software2012team23
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
 
  Based on a file from the The Android Open Source Project
  http://developer.android.com/resources/samples/ActionBarCompat/index.html
  -->
<html>
    <head>
        <meta charset="UTF-8" />  
        <title>WebSMSTool</title>
        <link rel="stylesheet" type="text/css" href="css/css.css" />
        <link rel="stylesheet" type="text/css" href="css/wstTab.css" /> 
        <meta name="description" content="WEB SMS TOOL" />    
        <link rel="icon" href="favicon.png" type="image/png">
    </head>
    <body>

        <div id="loading" style="display:none">
            <h2>WebSMSTool is loading!</h2>
            <img alt="loading animation" src="" />
        </div>

        <div id="content_wrapper">
            <header>
                <div class="logo">
                    <img alt="WEB-SMS-Tool Logo" src="" />
                </div>
                <h1>Web SMS Tool</h1>
                <p style="font-style:italic;">Make the most of your SMS flatrate!</p>
            </header>
          
        <div class="status">
            <p><img id="batter_img" src="" />&nbsp;<img id="signal_img" src="" /></p>
        </div>
          
        <div class="main">
          
            <div id="left_column">
                <h3>Contacts</h3>
                <div id="contact_list" class="list"></div>
            </div>
            
            
            <div id="right_column">
            
               <div id="tabs">
                   <ul>
                       <li id="li_0" data-list-contact-id="0">
                           <a href="#welcome" class="welcome_special">Welcome</a>
                       </li>
                   </ul>
                   
                   <div id="welcome" class="contact_tab">
                       <div class="content">
                           <h3>Web-SMS-Tool</h3>
                           <h4>Thanks for your using our service.</h4><br />
                           <h5>Usage</h5><br />
                           <p>To write a short message choose a contact from the contact list on the left side. After clicking on a contact the so called contact-tab will be opened.</p>
                           <p>In the contact-tab you can write a short message by simple choosing one of the specific contact's numbers and adding some text in the textarea. After clicking on Send your message will be delivered immediately.</p>
                           <p>At the bottom of the contact-tab you see a list of messages sent or received from the specific contact</p>
                           <p>After your message has been successfully sent to the contact, the message list of the contact-tab will update itself.</p>        
                       </div>
                    </div>
                </div>
            </div>
        <br style="clear:both" />  
    </div>
        <br style="clear:both" />
        <footer>&nbsp;</footer>
        <br style="clear:both" />
    </div>
    <br style="clear:both" />    
    <script src="js/jquery.js"></script>
    <script src="js/loader.js"></script>   
    <script src="js/client.js"></script>
    </body>
</html>
